import React, { useState, useEffect } from 'react'
import {
  List, Skeleton, Pagination, Button, message, Table, Tag, Space, DatePicker,
  Row,
  Col,
  Tabs
} from 'antd';
import { ArticleListApi, ArticleDelApi } from '../request/api'
import { useNavigate } from 'react-router-dom'
import moment from 'moment'
const { CheckableTag } = Tag;
const { TabPane } = Tabs;
export default function ListList() {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [update, setUpdate] = useState(1)

  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  const [selectedTags, setSelectedTags] = useState([])

  // 请求封装
  const getList = (num) => {
    ArticleListApi({
      num,
      count: pageSize
    }).then(res => {
      if (res.errCode === 0) {
        let { arr, total, num, count } = res.data;
        setList(arr);
        setTotal(total);
        setCurrent(num);
        setPageSize(count);
      }
    })
  }

  // 请求列表数据  componentDidMount
  useEffect(() => {
    getList(current)
  }, [])

  // 模拟componentDidUpdate
  useEffect(() => {
    getList(current)
  }, [update])

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

  // 删除
  const delFn = (id) => {
    ArticleDelApi({ id }).then(res => {
      if (res.errCode === 0) {
        message.success(res.message)
        // 重新刷页面，要么重新请求这个列表的数据   window.reload   调用getList(1)  增加变量的检测
        setUpdate(update + 1)
      } else {
        message.success(res.message)
      }
    })
  }
  const handleChange = (tag, checked) => {

    const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags)
  }
  const callback = (key) => {
    console.log(key);
  }

  const columns = [
    {
      title: '名前(フリガナ)',
      dataIndex: 'name',
      key: 'name',
      render: tags => (
        <>
          {
            <div className='list-box'>
              <img className='list-img-box' src="https://tse4-mm.cn.bing.net/th/id/OIP-C.avpyIg0p8EXBUheqaydYCAAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="头像" />
              <span> 大川 智之</span>
            </div>
          }
        </>
      ),
    },

    {
      title: '権限',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '診療科',
      key: 'tags',
      dataIndex: 'tags',
      render: tags => (
        <>
          {tags.map(tag => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },

  ];

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '33',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '13',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '23',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '34',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '14',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '25',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '36',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
    {
      key: '17',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '21',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '32',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];


  return (
    <div className='list_table' style={{ padding: '20px' }}>
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="スタッフ管理 " key="1">
          <div className='header-user-name'>
            <Row>
              <Col span={3} push={21}>
                <div className='user-name-box'>
                  <span> 大川 智之</span>

                  <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.avpyIg0p8EXBUheqaydYCAAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="头像" />
                </div>

              </Col>
            </Row>
          </div>
          <div className='observe-list-box'>
            <div  className='observe-title'>
              <span className='list-title-test'>スタッフ-覧 </span>
              <Button className='list-title-btn' >新規登録</Button>
            </div>

            <Table columns={columns} dataSource={data} size={"small"} />
          </div>

        </TabPane>

      </Tabs>


    </div>
  )
}
